import { Component, OnInit, AfterViewInit } from "@angular/core";

import { Store, select } from "@ngrx/store";
import * as fromUser from "@/user/store/reducers/index";
import * as fromTrade from "@/trade/store/reducers/index";
import * as fromAssets from "@/assets/store/reducers/index";
import * as fromRoot from "@/reducers/index";
import { map, filter, skip, switchMap } from "rxjs/operators";
import { Subscription, combineLatest } from "rxjs";
import { UserActions } from "@/user/store/actions";
import { combineAll, debounceTime } from "rxjs/operators";
import { TradeActions } from "@/trade/store/actions";

import { ISelectOrderRequest } from "@/trade/store/models/trade";
import { ActivatedRoute } from "@angular/router";
import { ISelectAssetsRequest } from "@/assets/store/models/assets";
import { AssetsActions } from "@/assets/store/actions";

import Scrollbar from "smooth-scrollbar";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.component.scss"]
})
export class HomeComponent implements OnInit, AfterViewInit {
  user$ = this.store.pipe(
    select(fromRoot.user),
    filter(user => !!user)
  );
  req: ISelectAssetsRequest = {
    uid: ""
  };

  assetsMap$ = this.store.pipe(
    select(fromRoot.assetsMap),
    filter(assetsMap => !!assetsMap)
  );

  onTab = "buy";

  isLogin$ = this.store.pipe(
    select(fromRoot.userRes),
    filter(e => e.code !== -1),
    map(e => e.code === 200)
  );

  constructor(
    private store: Store<
      fromTrade.State | fromUser.State | fromAssets.State | fromRoot.State
    >,
    private activeRouter: ActivatedRoute
  ) {}

  ngAfterViewInit() {
    // Scrollbar.init(document.querySelector("[data-scrollbar]"));
  }

  ngOnInit() {
    // si xun huan
    // Scrollbar.initAll();
    this.addListen();
  }

  addListen() {
    combineLatest(this.user$, this.activeRouter.queryParams).subscribe(
      ([user, query]) => {
        this.req.uid = user.id;

        this.store.dispatch(new AssetsActions.SelectAssets({ req: this.req }));
      }
    );

    this.assetsMap$.subscribe(e => {
      // console.log(e, 999999);
    });
  }
}
